<template>
	<!-- 搜索框 -->
	<div class="search">
		<select class="source">
			<option value="https://www.google.com.hk/search?q=" selected>Google</option>
			<option value="https://cn.bing.com/search?q=" >必应</option>
			<option value="https://so.csdn.net/so/search?q=" >CSDN</option>
			<option value="https://www.sogou.com/web?query=">搜狗</option>
			<option value="https://www.baidu.com/s?ie=utf-8&word=">百度</option>
		</select>
		<input type="text" class="searText" id="searText" placeholder="Search...">
		<button class="searBtn">搜索</button>
	</div>
</template>

<script>
	export default {
		name:'Search',
		// data 要写成函数式
		data(){
			return{
			};
		},
		methods:{
		}
	};
	import $ from 'jquery'
	$(function(){
		// 搜索
		$(".searBtn").click(function(){
			let $sText = $("#searText").val();
			// console.log($sText);
			let $href =$(".source").val() + $sText;
			// console.log($href);
			// 跳转到目标网页
			// 在该窗口跳转网页
      // window.location.href = $href
      // 打开新的窗口，跳转网页
      window.open($href);
		});
		
		// 搜索框内发生回车事件
		$("#searText").keydown(function(e){
			if(e.keyCode==13){
				let $sText = $("#searText").val();
				// console.log($sText);
				let $href =$(".source").val() + $sText;
				// console.log($href);
				// 跳转到目标网页
				// 在该窗口跳转网页
        // window.location.href = $href
        // 打开新的窗口，跳转网页
        window.open($href);
			}
			
		});
	})
	
</script>

<style scoped>
	.search{
		position: relative;
	    margin: 20px auto 0;
	    width: 603px;
	    height: 50px;
		overflow: hidden;
		line-height: 50px;
	}
	.source{
		position: relative;
		top: -1px;
		width: 100px;
		height: 45px;
		border: 1px solid #e2e2e3;
		text-align: center;
		border-radius: 7px 0 0 7px;
		font-size: 16px;
		font-weight: 600;
		color: #161616;
		background-color: #e2e2e3;
	}
	.source option{
		width: 100px;
		height: 40px;
		line-height: 45px;
		border: none;
	}
	.searText{
		border: 1px solid #c7c7c8;
	    width: 390px;
	    height: 39px;
		line-height: 40px;
	    padding: 2px 15px;
	    outline: none;
		font-size: 18px;
	}
	.searBtn{
		color: #ffffff;
		font-size: 20px;
		font-weight: bolder;
	    border: none;
	    width: 80px;
	    height: 45px;
	    line-height: 45px;
		border-radius: 0 9px 9px 0;
		text-align: center;
	    background-color: #3e3e3e;
	    cursor: pointer;
	}
</style>
